<template>
	<view class="content">
		<view id="top-box" class="cu-bar bg-white solid-bottom">
			<view class="action text-black">
				<uni-tag
				  :inverted="true"
				  :text="questionCount" 
				  type="primary" >
				</uni-tag>
			</view>
		</view>
		
		<view id="top-box" class="cu-bar bg-white solid-bottom">
			<view class="action text-black">
				<uni-tag 
				 :text="currentQuestionName" 
				 type="error" :circle="true">
				</uni-tag>
			</view>
		</view>
		<view class="cu-modal" 
		:class="modalCard=='modalCard'?'show':''"
		 @tap="hideCardModal">
			<view class="cu-dialog" @tap.stop>
				<scroll-view class="page padding"
				 :scroll-y="true" :style="{'height':swiperHeight}" >				
					<view class="cu-bar solid-bottom">
						<view class="action">
							<text class="cuIcon-title text-red"></text>答题卡
						</view>					
					</view>
						<!-- :class="[item.userInfoAnswer === item.asnwer ? 'line-grey':'bg-red']" -->
					 <view class="grid col-5 ">
						<view class="margin-tb-sm text-center" 
						v-for="(item, index) in examQuestionAnswerList" :key="index">
							<button class="cu-btn round" 
							:class="{
								'line-green': item.studentAnswer === item.answer,
							    'bg-red': item.studentAnswer && (item.studentAnswer !== item.answer) 
							}"
							 @click="appointedQuestion(index)" >{{index + 1}}</button>
						</view>
					</view> 
				</scroll-view>
			</view>
		</view>
		<view class="cu-modal padding " :class="modalError=='modalError'?'show':''" @tap="hideErrorModal">
			<view class="cu-dialog bg-white" @tap.stop>								
				
				<view class="cu-bar solid-bottom ">
					<view class="action">
						<text class="cuIcon-title text-red"></text>试题纠错
					</view>					
				</view>
				
				<radio-group class="block" >
					<view class="cu-list menu text-left">
					<view class="cu-item cu-item-error" v-for="error in errorList" >
						<radio :value="error"></radio>
						<view class="title text-black margin-left">{{error}}</view>
					</view>	
					</view>	
				</radio-group>				
				
				<view class="padding flex flex-direction ">				
					<button class="cu-btn bg-red margin-tb-sm lg" @click="SubmitError">提 交</button>
				</view>
			</view>
		</view>
		
		
		<form>
			<swiper
			 :current="questionIndex"
			  class="swiper-box" @change="swiperChange" 
			  :style="{'height':swiperHeight}">
				<swiper-item v-for="(questionInfo, index) in examQuestionAnswerList">
					<scroll-view class="scroll-v list" :style="{'height':swiperHeight}" :scroll-y="true">
						<view class="cu-bar bg-white solid-bottom">
							<view class="action text-black">
								<!-- <uni-tag text="1"></uni-tag> -->
								 <!-- <div>1.</divs> -->
								<!-- App端（vue页面V3编译模式）和H5端支持v-html，其他端不支持v-html。-->
								<!-- <text style="font-weight: bold; position: relative; top: -4px;">{{index + 1}}.</text> -->
								<view class="questionInfo_content" 
								   style="margin-top: 15px; font-size: 26rpx; display: inline-block;">
									<uParse :content="questionInfo.content"/>
								</view> 
							</view>
						</view>
						<view>
							<!-- 判断题 -->  
							<radio-group 
							  v-if="questionInfo.questionType === 6"
							  class="block" @change="radioboxChange">
								 <view class="cu-form-group" > 
									<radio 
									value="1" 
									:checked="questionInfo.studentAnswer === '1'"></radio>
									<view class="title text-black">对</view>
								 </view> 
								 <!-- :disabled="questionInfo.userInfoAnswer !== ''" -->
								 <view class="cu-form-group">
									<radio
									value="0" 
									:checked="questionInfo.studentAnswer === '0'"></radio>
									 <view class="title text-black">错</view> 
								 </view>
							</radio-group>
							
							<!-- 单选题 -->  
							<radio-group
							  v-else-if="questionInfo.questionType === 1"
							  class="block" @change="radioboxChange">
								<view class="cu-form-group" v-for="item in questionInfo.optionList">
									<radio 
									:value="item.label" 
									:checked="item.studentAnswer === item.value">{{item.label}}.</radio>
									<view v-html="item.option_name" class="title text-black"></view>
								</view>
							</radio-group>
							
							<checkbox-group 
							  v-else 
							  class="block" @change="checkboxChange">
								<view class="cu-form-group" v-for="item in questionInfo.optionList">
									<checkbox
									 :value="item.label" 
									 :checked="item.checked">{{item.label}}.</checkbox>
									 <view v-html="item.option_name" class="title text-black"></view> 
								</view>
							</checkbox-group>
							
						</view>

						<view class="margin-top solid-top">
							<view class="cu-bar">
								<view class="action  text-grey">
									<text>批改状态：
										<uni-tag 
										 text="正确"
										 v-if="questionInfo.correctStatus === 1"
										 type="success" :circle="true">
										</uni-tag>
										
										<uni-tag
										 text="错误"
										  v-else-if="questionInfo.correctStatus === 0"
										 type="error" :circle="true">
										</uni-tag>
										
										<uni-tag
										 text="待批改"
										 v-else-if="questionInfo.correctStatus === 2"
										 type="error" :circle="true">
										</uni-tag>
										
										<uni-tag
										 text="已批改"
										 v-else
										 type="error" :circle="true">
										</uni-tag>
									</text>
								</view>
							</view>
							
							<view class="cu-bar">
								<view class="action  text-grey">
									<text>分值：{{questionInfo.questionMark}}分</text>
								</view>
							</view>
							
							<view class="cu-bar">
								<view class="action  text-grey">
									<text>得分：{{questionInfo.studentMark}}分</text>
								</view>
							</view>
							
							<view class="cu-bar">
								<view v-if="isSubjectiveQuestion(questionInfo.questionType)" class="action  text-grey">
									<text>正确答案：</text>
									<uParse :content="questionInfo.answer"/>
								</view>
								<view v-else class="action  text-grey">
									<text>
										正确答案：{{questionInfo.answer |
										 parseAnswer(questionInfo.questionType)}}
									</text>
								</view>
							</view>
							
							<view class="cu-bar">
								<view 
								 v-if="!isSubjectiveQuestion(questionInfo.questionType)"
								 class="action  text-grey">
									<text>
									你的答案：{{questionInfo.studentAnswer | parseAnswer(questionInfo.questionType)}}
									</text>
								</view>
								
								 <view v-else
								  class="action  text-grey">
									<text>
									你的答案：
									</text>
									
									<view v-if="questionInfo.studentAnswer" style="margin-bottom: 50px;">
										<el-upload :imgList="questionInfo.studentAnswer"/>
									</view>
									
									<text v-else>未作答</text>
								</view> 
								
							</view>
							
							<view class="cu-bar cu-bar-title">
								<view class="action  text-grey">
									<text>解析：</text>
								</view>
							</view>
							<view 
							class="text-content padding  text-grey">
							   <uParse :content="questionInfo.analysis"/>
							</view>
						</view>
					 </scroll-view>
					
				</swiper-item>
			</swiper>
		</form>
		
		
		<view id="foot-box" class="cu-bar tabbar bg-white shadow foot">
			<view class="action" @click="changeQuestionInfo(-1)">
				 <view class="cuIcon-cu-image">
					<text class="lg cuIcon-back text-gray"></text>
				</view> 
				<view class="text-gray">上一题</view> 
				
			</view>
			<view class="action" @click="changeQuestionInfo(1)">
				 <view class="cuIcon-cu-image">
					<text class="lg text-gray cuIcon-right"></text>
				</view>
				<view class="text-gray">下一题</view>
			</view>
			
			<view class="action" @click="FavorSubject">
				<view class="cuIcon-cu-image">
					<text class="lg cuIcon-favor" :class="[userFavor?'text-red':'text-gray']"></text>
				</view>
				<view  :class="[userFavor?'text-red':'text-gray']">收藏</view>
			</view>

            <view class="action" @tap="showErrorModal"  data-target="modalError">
				<view class="cuIcon-cu-image">
					<text class="lg text-gray cuIcon-warn"></text>
				</view>
				<view class="text-gray">纠错</view>
			</view>
			
			<view  class="action" @tap="showCardModal"data-target="modalCard">
				<view class="cuIcon-cu-image">
					<text class="lg text-gray cuIcon-card"></text>
				</view>
				<view class="text-gray">答题卡</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniTag from '@/components/uni-tag/uni-tag.vue'
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import uParse from '@/components/uParse/src/wxParse.vue'
	import elUpload from '@/components/upload.vue'
	import { mapGetters } from 'vuex'
/* 	import {isSubjectiveQuestion} from '@/api/common.js' */
	export default {
		components: {uniTag, uniIcons, uParse, elUpload},
		data() {
			return {
				examInfoId: '',
				questionGroupList: [], // 试题分组列表
				examQuestionAnswerList: [],
				questionCount: null,
				questionTotal: 0, // 试题数量
				currentQuestionName: '', // 当前试题名称
				userFavor: false,//是否已收藏
				currentType: 0, //当前题型
				questionIndex: 0,//跳转索引
				autoShowAnswer: false,//答错是否显答案
				autoRadioNext:true,//判断题、单项题，自动移下一题
				swiperHeight: '800px',//
				title: '',
				modalCard: null ,//显示答题卡
				modalError: null , //纠错卡
				errorList:['题目不完整', '答案不正确', '含有错别字', '图片不存在', '解析不完整', '其他错误']
			}
		},
		
		computed: {
		   ...mapGetters({
				fileHost: 'common/fileHost'
		   })
		},
		
		onReady() {
			var tempHeight = 800;
			var _me = this;
			uni.getSystemInfo({
				//获取手机屏幕高度信息，让swiper的高度和手机屏幕一样高                
				success: function(res) {
					tempHeight = res.windowHeight;
					uni.createSelectorQuery().select("#top-box").fields({
						size: true,
						scrollOffset: true
					}, (data) => {
						tempHeight -= data.height;
						uni.createSelectorQuery().select("#foot-box").fields({
							size: true,
							scrollOffset: true
						}, (data) => {
							tempHeight -= data.height;
							_me.swiperHeight = tempHeight + 'px';
						}).exec();
					}).exec();
				}
			});
		},
		

		destroyed () {
			
		},

		onLoad(params) {
			this.examInfoId = params.examInfoId
			this.getExamInfoById(this.examInfoId)
		},
		
		methods: {
			getExamInfoById (id) {
			  this.$httpApi.get('/student/exam/selectExamQuestionAnswer/' + id)
				.then(res => {
				  let result = res.data
				  this.examInfo = result.studentExamInfoDto
				  this.questionGroupList = result.questionGroupItemResponseList
				  let questionIndex = 0
				  this.questionGroupList.forEach(question => {
					   let questionList = question.questionInfoAnswerList
					   questionList.forEach(subItem => {
						   ++questionIndex
						   if (subItem.questionType === 1 || subItem.questionType === 2) {
						        let options = subItem.options
								if (options) {
									 subItem.optionList = JSON.parse(options)
									 
								}
						    }
							 // 试题类型非单选和判断题， 解析答案数组
							if (subItem.questionType !== 1 && subItem.questionType !== 6) {
							   let studentAnswerStr = subItem.studentAnswer
							   let studentAnswerArray = []
							   if (studentAnswerStr) {
								 studentAnswerStr.split(',').forEach(value => {
								   if (value && subItem.questionType !== 2) {
									 studentAnswerArray.push(this.fileHost + value)
								   } else {
									 // 多选题
									 studentAnswerArray.push(value)
									
								   }
								 })
								 subItem.studentAnswer = studentAnswerArray
							   }
							   
							   if (subItem.optionList) {
								   subItem.optionList.forEach(option => {
										let value = option.label
										option.checked = false
										if (subItem.studentAnswer.length > 0) {
											subItem.studentAnswer.forEach(answer => {
												if (answer === value) {
													option.checked = true
												}
											})
										} 
								   }) 
							   }
							   
							}
							this.examQuestionAnswerList.push(subItem)
					   })
				  })
				 
				  
				  this.questionTotal = this.examQuestionAnswerList.length
				  this.questionCount = 1 + '/' + this.questionTotal
				  this.currentQuestionName = this.examQuestionAnswerList[0].questionTypeName
			  })
			},
			
			isSubjectiveQuestion(questionType) {
				if (questionType !== 1 && questionType !== 2 && questionType !== 6) {
					return true
				}
				return false
			},
			
			showCardModal (e) {
				this.modalCard = e.currentTarget.dataset.target
			},
			
			hideCardModal (e) {
				this.modalCard = null
			},
			
			showErrorModal (e) {
				this.modalError = e.currentTarget.dataset.target
			},
			
			hideErrorModal (e) {
				this.modalError = null
			},
			
			swiperChange (e) { //滑动事件
				let index = e.target.current
				if (index != undefined) {
					this.questionIndex = index
					this.questionCount = this.questionIndex + 1 + '/' + this.questionTotal
					this.currentQuestionName = this.examQuestionAnswerList[this.questionIndex].questionTypeName
				}								
			},			
			
			
			//上一题、下一题
			changeQuestionInfo (val) {
				if (this.questionIndex === 0 && val === -1) {
					uni.showToast({
						icon: 'none',
						title: '亲, 没有上一题了'
					})
					return
				}
				
				if (val === -1 && this.subjectIndex != 0) {
					this.questionIndex -= 1;
				}
				if (val === 1 && this.questionIndex < this.examQuestionAnswerList.length - 1) {
					this.questionIndex += 1;
				} 
				else if (this.questionIndex  === this.examQuestionAnswerList.length - 1) {
					uni.showToast({
						icon: 'none',
						title: '亲, 已经是最后一题了'
					})
					return
				}
				if (this.questionIndex > 0) {
					this.questionCount = this.questionIndex + 1 + '/' + this.questionTotal
			    }
			},
			
			// 答题卡试题切换
			appointedQuestion (val) { 
				this.modalCard = null
				this.questionIndex = val									
			},			
			
			SubmitError: function(e) { //提交纠错
				this.modalError = null;														
			}
			
		},
		
		filters: {
			parseAnswer (answer, questionType) {
				if (answer === 1 || answer === '1') {
				  return '对'
				} else if (answer === 0 || answer === '0') {
				  return '错'
				} else if (questionType === 2 && answer instanceof Array) {
				  let answerValue = ''
				  answer.forEach(value => {
					answerValue += value + ','
				  })
				  return answerValue.substr(0, answerValue.length - 1)
				}
				return answer
			}
		}
	}
</script>

<style scoped>
	@import "@/colorui/animation.css";
	@import "@/colorui/main.css";
	@import "@/colorui/icon.css";
	/*每个页面公共css */
	page {
		background-color: #FFFFFF;
	}
	
	view {
		line-height: 1;
	}
	
	uni-radio:before {
		content: ''
	}
	
	uni-view {
		font-size: 14px;
	}
/*    .questionInfo_content p {
		display: inline-block;
	} */
	uni-checkbox:before {
		content: ''
	}
    
    .line-green {
	   background-color: #409eff !important;
	   color: #F0F0F0;
	} 
	.cu-form-group {
		justify-content: flex-start
	}

	.cu-form-group .title {
		padding-left: 30upx;
		padding-right: 0upx;
	}

/* 提示窗口 */
	.uni-tip {
		padding: 15px;
		width: 300px;
		background: #fff;
		box-sizing: border-box;
		border-radius: 10px;
	}

	.uni-tip-title {
		text-align: center;
		font-weight: bold;
		font-size: 16px;
		color: #333;
	}

	.uni-tip-content {
		padding: 15px;
		font-size: 14px;
		color: #666;
	}

	.uni-tip-group-button {
		margin-top: 10px;
		display: flex;
	}

	.uni-tip-button {
		width: 100%;
		text-align: center;
		font-size: 14px;
		color: #3b4144;
	}

	.cu-form-group+.cu-form-group {
		border-top: none;
	}

	.cu-bar-title {
		min-height: 50upx;
	}
	.cu-list.menu>.cu-item-error{justify-content: flex-start;}
</style>
